<template>
  <div class="qly">
    <Table :tableData="paneE.tableDataA" @blur="handleBlur" />
    <section style="margin-top: 30px">
      <i class="el-icon-star-on"></i>
      产品资费(X元/年)：
      <el-input v-model="val" style="width: 200px" size="small" />
    </section>
    <section>
      <span class="title">
        <i class="el-icon-star-on"></i>
        选择属性组：
      </span>
      <br />
      <el-checkbox-group v-model="paneE.checkedOptionsB" style="line-height: 2">
        <el-checkbox
          v-for="(option, index) in paneE.optionsB"
          :label="option"
          :key="index"
        >
          {{ option }}
        </el-checkbox>
      </el-checkbox-group>
    </section>
    <Card
      v-if="paneE.checkedOptionsB.length"
      title="产品属性"
      style="margin-top: 10px"
    >
      <section v-for="(item, index) in paneE.checkedOptionsB" :key="item">
        <span class="title" style="margin-top: 10px; margin-bottom: 10px">
          <i class="el-icon-star-on"></i>
          {{ item }}：
        </span>
        <el-form inline size="small" label-width="100px">
          <el-form-item label="license费单价">
            <el-input v-model="fdj[index].dj"></el-input>
          </el-form-item>
          <el-form-item label="license数">
            <el-input v-model="fdj[index].bj"></el-input>
          </el-form-item>
        </el-form>
      </section>
      <section>
        <span class="title">
          <i class="el-icon-star-on"></i>
          一次性费用：
        </span>
        <br />
        <el-form size="small" label-width="140px" inline>
          <el-form-item label="安装调试服务费单价">
            <el-input type="text" v-model="paneE.form.valA" />
          </el-form-item>
          <el-form-item label="安装调试服务点数">
            <el-input type="text" v-model="paneE.form.valB" />
          </el-form-item>
          <el-form-item label="现场运维服务费单价">
            <el-input type="text" v-model="paneE.form.valC" />
          </el-form-item>
          <el-form-item label="现场运维服务费点数">
            <el-input type="text" v-model="paneE.form.valD" />
          </el-form-item>
          <el-form-item label="响应服务费单价">
            <el-input type="text" v-model="paneE.form.valE" />
          </el-form-item>
          <el-form-item label="响应服务次数">
            <el-input type="text" v-model="paneE.form.valF" />
          </el-form-item>
        </el-form>
      </section>
    </Card>
    <section style="margin-bottom: 20px">
      <span class="title">
        <i class="el-icon-star-on"></i>
        其他信息：
      </span>
      <br />
      <Table :tableData="paneE.tableData" />
    </section>
  </div>
</template>

<script>
import Card from '@/components/Card'
import Table from '@/components/Table'
export default {
  components: {
    Card,
    Table
  },
  data() {
    return {
      paneE: {
        tableData: {
          col: [
            {
              prop: 'colA',
              label: '客户经理名称'
            },
            {
              prop: 'colB',
              label: '客户经理电话'
            }
          ],
          row: []
        },
        tableDataA: {
          col: [
            {
              prop: 'colA',
              label: '客户名称',
              type: 'Input'
            },
            {
              prop: 'colB',
              label: '客户编码',
              type: 'Input'
            },
            {
              prop: 'colC',
              label: '客户所在地',
              type: 'Input'
            },
            {
              prop: 'colD',
              label: '是否VIP',
              type: 'Input'
            }
          ],
          row: [
            {
              colA: '',
              colB: '',
              colC: '',
              colD: ''
            }
          ]
        },
        form: {
          valA: '',
          valB: '',
          valC: '',
          valD: '',
          valE: '',
          valF: ''
        },
        dialogVisible: false,
        innerVisibleA: false,
        innerVisibleB: false,
        checkedOptionsA: [
          '会议包月费，每成员每月x元（包月），默认参考标准资费75元'
        ],
        optionsA: [
          '会议包月费，每成员每月x元（包月），默认参考标准资费75元',
          '会议包月费，每成员每月x元（首月按天），默认参考标准资费75元',
          '云视党建包月费：x元/月用户，标准资费15元，低于10元送总部业务管理员审批',
          '会议开发包月费（集成业务），单路会议每月X元（包月），标准资费100元，低于标准资费需送总部业务管理员审批，首月按月计费',
          '会议并发包月费（集成业务），单路会议每月X元（包月），标准资费100元，低于标准资费需送总部业务管理员审批，首月按天计费'
        ],
        checkedOptionsB: [],
        optionsB: [
          '双目防火探测系统（1km半径）',
          '双目防火探测系统（3km半径）',
          '双目防火探测系统（5km半径）',
          '卫星遥感火情监测系统-A档（省级）',
          '卫星遥感火情监测系统-B档（地级市）',
          '卫星遥感火情监测系统-C档（区县级）'
        ]
      },
      fdj: [
        {
          dj: 35000,
          bj: 0
        },
        {
          dj: 40000,
          bj: 0
        },
        {
          dj: 50000,
          bj: 0
        },
        {
          dj: 55000,
          bj: 0
        },
        {
          dj: 60000,
          bj: 0
        },
        {
          dj: 65000,
          bj: 0
        }
      ]
    }
  },
  computed: {
    val() {
      let sum = 0
      this.fdj.forEach(item => {
        sum += item.dj * item.bj
      })
      return sum
    }
  },
  methods: {
    handleBlur() {
      this.paneE.tableDataA.row = [
        {
          colA: '立正集团',
          colB: 'A3265488562',
          colC: '北京',
          colD: '是'
        }
      ]
      this.paneE.tableData.row = [
        {
          colA: '孙正',
          colB: '13563584236'
        }
      ]
    }
  }
}
</script>

<style lang="scss" scoped>
.title {
  font-size: 16px;
  display: block;
  margin-top: 30px;
}
</style>
